import { useRequest } from "ahooks";

import { Drawer, Image, Descriptions, Button, Divider } from "antd";
import React, { useState, useCallback, useEffect } from "react";
import { getProItemDetailApi } from "@/api/pro";
export const useDetailDrawer = () => {
  const [openDrawer, setOpenDrawer] = useState(false);
  const [proid, setProid] = useState("");
  const handeCheck = useCallback((id) => {
    setProid(id);
    setOpenDrawer(true);
  }, []);
  return {
    open: openDrawer,
    toggleOpen: () => setOpenDrawer(!openDrawer),
    proid,
    handeCheck,
  };
};
const AppDrawerViewEdit = (props) => {
  const { open, toggleOpen, proid } = props;
  // 请求详情
  const {
    data = [],
    loading,
    run,
    mutate,
  } = useRequest(getProItemDetailApi, {
    manual: true,
  });
  console.log("dadwa", data);
  useEffect(() => {
    mutate([]);
    proid != "" && run(proid);
  }, [proid]);

  return (
    <Drawer
      title={
        proid === "" ? (
          "新增文本内容"
        ) : (
          <div style={{ fontSize: "900", fontSize: 15 }}>
            {data[0]?.proname}
          </div>
        )
      }
      placement="right"
      open={open}
      onClose={toggleOpen}
    >
      {data && proid != "" && (
        <>
          <Image width={300} src={data[0]?.img1}></Image>
          <Descriptions>
            <h3>{data[0]?.desc}</h3>
            {/* <h3>
        {data[0]?.img1}
        </h3> */}
          </Descriptions>
          <Divider></Divider>
          <Button type="primary" style={{ float: "right" }}>
            {" "}
            编辑{" "}
          </Button>{" "}
          <Button type="dashed" onClick={toggleOpen}>
            {" "}
            关闭{" "}
          </Button>{" "}
        </>
      )}
    </Drawer>
  );
};
// 新增编辑表格

export default AppDrawerViewEdit;
